<template>
  <div class="top">
    <div class="left1">
      <div class="left1Top" style="text-align: center;">
          <h3 class="myH3">销售部车辆销售台数TOP4</h3>
            <el-table
              :data="xiaoShouPaiHang"
              border
              size="mini"
                  :row-style="{height:'20px'}"
                  :cell-style="{padding:'0px'}"
              style="width: 100% ;font-size: 10px ;">
              <el-table-column
                prop="date"
                label="排名"
                >
              </el-table-column>
              <el-table-column
                prop="name"
                label="销售顾问"
                >
              </el-table-column>
              <el-table-column
                prop="address"
                label="本年">
              </el-table-column>
              <el-table-column
                prop="address2"
                label="本月">
              </el-table-column>
            </el-table>
          <div class="Echarts">
            <div id="main" style="width: 24.75rem; height:14.25rem;"></div>
          </div>
      </div>
      <div class="left1Bottom" style="text-align: center;">
        <h3 class="myH3">销售部车辆销售收入TOP4</h3>
          <el-table
            :data="tableData"
            border
            size="mini"
                :row-style="{height:'20px'}"
                :cell-style="{padding:'0px'}"
            style="width: 100%  ;font-size: 10px ;">
            <el-table-column
              prop="date"
              label="排名"
              >
            </el-table-column>
            <el-table-column
              prop="name"
              label="销售顾问"
              >
            </el-table-column>
            <el-table-column
              prop="address"
              label="本年">
            </el-table-column>
            <el-table-column
              prop="address2"
              label="本月">
            </el-table-column>
          </el-table>
      </div>
    </div>
    <div class="left2">
      <div class="left2Top" style="text-align: center;">
        <h3 class="myH3">销售部人员状况</h3>
          <el-table
            :data="tableData1"
            border
            size="mini"
                :row-style="{height:'20px'}"
                :cell-style="{padding:'0px'}"
            style="width: 100%  ;font-size: 10px ;">
            <el-table-column
              prop="date"
              label="时间"
              >
            </el-table-column>
            <el-table-column
              prop="name"
              label="在职"
              >
            </el-table-column>
            <el-table-column
              prop="address"
              label="离职">
            </el-table-column>
            <el-table-column
              prop="address2"
              label="新增">
            </el-table-column>
            <el-table-column
              prop="address3"
              label="流失率">
            </el-table-column>
          </el-table>
      </div>
      <div class="left2Bottom" style="text-align: center;">
        <h3 class="myH3" style="padding: 5px;">库存时间与金额</h3>
          <el-table
            :data="kuCunShiJian"
            border
            size="mini"
                :row-style="{height:'28px'}"
                :cell-style="{padding:'0px'}"
            style="width: 100%  ;font-size: 15px ;">
            <el-table-column align="center"
              prop="time"
              label="库存时间"
              >
            </el-table-column>
            <el-table-column label="燃油车" align="center">
  
            <el-table-column align="center"
              prop="OldTaiShu"
              label="台数"
              >
            </el-table-column>
  
            <el-table-column align="center"
              prop="OldJinEr"
              label="金额">
            </el-table-column>
  
            </el-table-column>
  
            <el-table-column label="新能源车" align="center">
  
            <el-table-column align="center"
              prop="NewTaiShu"
              label="台数"
              >
            </el-table-column>
  
            <el-table-column align="center"
              prop="NewJinEr"
              label="金额">
            </el-table-column>
  
            </el-table-column>
          </el-table>
      </div>
    </div>
    <div class="left3">
      <div class="left3Top" style="text-align: center;">
        <h3 class="myH3">销售部转介绍车辆销售台数TOP4</h3>
          <el-table
            :data="left3TopData"
            border
            size="mini"
                :row-style="{height:'20px'}"
                :cell-style="{padding:'0px'}"
            style="width: 100% ;font-size: 10px ;">
            <el-table-column
              prop="date"
              label="排名"
              >
            </el-table-column>
            <el-table-column
              prop="name"
              label="销售顾问"
              >
            </el-table-column>
            <el-table-column
              prop="address"
              label="本年">
            </el-table-column>
            <el-table-column
              prop="address2"
              label="本月">
            </el-table-column>
          </el-table>
        <div class="Echarts7">
          <div id="main7" style="width: 24.75rem; height:14.25rem;"></div>
        </div>
      </div>
      <div class="left3Bottom" style="text-align: center;">
        <h3 class="myH3">销售部衍生销售收入TOP4</h3>
          <el-table
            :data="myleft3Bottom"
            border
            size="mini"
                :row-style="{height:'20px'}"
                :cell-style="{padding:'0px'}"
            style="width: 100%  ;font-size: 10px ;">
            <el-table-column
              prop="date"
              label="排名"
              >
            </el-table-column>
            <el-table-column
              prop="name"
              label="销售顾问"
              >
            </el-table-column>
            <el-table-column
              prop="address"
              label="本年">
            </el-table-column>
            <el-table-column
              prop="address2"
              label="本月">
            </el-table-column>
          </el-table>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="bottomLeft" style="text-align: center;">
      <h3 class="myH3">销售部年度综合收入一览（万元）</h3>
      <div class="Echarts " style="width: 100%; height: 90%;">
        <div id="mainZ" style="width: 100%;height:100%;"></div>
      </div>
    </div>
    <div class="bottomRight" style="text-align: center;">
      <h3 class="myH3">销售部年度销售台数一览（台）</h3>
      <div class="Echarts8" style="width: 100%; height: 90%;">
        <div id="main8"  style="width: 100%;height:100%;"></div>
      </div>
    </div>
  </div>
</template>

<script>

  
</script>

<style>
</style>
